<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between;">
                <div>
                    <el-input
                            :disabled="showSearch"
                            placeholder="请输入员工姓名..."
                            prefix-icon="el-icon-search"
                            clearable
                            @clear="getEmployeeecs"
                            size="small"
                            style="width: 300px;margin-right: 8px;"
                            @keydown.enter.native="getEmployeeecs"
                            v-model="name"></el-input>
                    <el-button icon="el-icon-search" type="primary" size="small" @click="getEmployeeecs" :disabled="showSearch">查询</el-button>
                    <el-button type="primary" size="small" @click="showSearch=!showSearch">
                        <i :class="showSearch?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
                        条件查询
                    </el-button>
                </div>
                <div>
                    <el-button icon="el-icon-circle-plus-outline" type="primary" size="small" @click="showAddEmployeeec">新增员工奖惩信息</el-button>
                </div>
            </div>
            <el-collapse-transition>
                <div v-show="showSearch" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
                    <el-row>
                        <el-col :span="6">
                            <div style="display: inline-flex">
                                <el-tag type="warning" style="margin-top: 8px;margin-right: 5px">所属部门:</el-tag>
                                <el-popover
                                        placement="right"
                                        width="250"
                                        trigger="manual"
                                        v-model="popVisible3">
                                    <div style="display: flex;justify-content: space-between ">
                                        <span>请选择部门</span>
                                        <i class="el-icon-close" style="margin-top: 2px" @click="popVisible3=false"></i>
                                    </div>
                                    <el-tree
                                            :data="allDepartments"
                                            :props="defaultProps"
                                            default-expand-all
                                            @node-click="searchHandleNodeClick"></el-tree>
                                    <div slot="reference" @click="showDepartmentViewToAdvanced">
                                        <el-tag style="width:150px;height:30px;margin-top: 8px;background-color:white">{{selectdDepName}}</el-tag>
                                    </div>
                                </el-popover>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="display: flex;justify-content: flex-start;align-items: center;padding: 5px">
                                <el-tag type="warning" style="margin-right: 5px">工号:</el-tag>
                                <el-input size="small" v-model="searchParams.employee.jobNo" placeholder="请输入员工工号"></el-input>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="display: flex;justify-content: flex-start;align-items: center;padding: 5px">
                                <el-tag type="warning" style="margin-right: 5px">姓名:</el-tag>
                                <el-input size="small" v-model="searchParams.employee.name" placeholder="请输入员工姓名"></el-input>
                            </div>
                        </el-col>
                        <el-col :span="6" style="margin-top: 8px;display: flex;justify-content:center">
                            <el-button size="mini" @click="emptySearchParams">清空</el-button>
                            <el-button size="mini" icon="el-icon-search" type="primary" @click="getEmployeeecs('advanced')">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-transition>
        </div>
<!--        @selection-change="handleSelectionChange"-->
        <div style="margin-top: 10px">
            <el-table
                    v-loading="loading"
                    :data="employeeecs"
                    border
                    stripe
                    size="small"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="employee.name"
                        label="员工名称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="employee.jobNo"
                        label="员工工号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="employee.department.name"
                        label="部门名称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="rewardOrPenalty.name"
                        label="奖罚名称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="rewardOrPenalty.description"
                        label="奖罚说明"
                        :show-overflow-tooltip="true"
                        width="300">
                </el-table-column>
                <el-table-column
                        label="涉及金额"
                        width="100">
                    <template slot-scope="scope">
                        <i class="el-icon-money"></i>
                        <span style="margin-left: 10px">{{ scope.row.rewardOrPenalty.money}}元</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ecDate"
                        label="登记日期"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注"
                        width="100">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="200"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="showEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: center;margin-top: 10px">
                <el-pagination
                        background
                        @prev-click="prevClick"
                        @next-click="nextClick"
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
            <el-dialog
                    @close="viewClose"
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="60%">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div style="display: flex;justify-content: flex-start;align-items: center">
                            <el-tag style="margin-right: 5px">员工工号:</el-tag>
                            <el-autocomplete
                                    class="inline-input"
                                    v-model="employeeec.employee.jobNo"
                                    :fetch-suggestions="querySearch"
                                    placeholder="请输入内容"
                                    :trigger-on-focus="false"
                                    @select="handleSelect"
                                    size="small"
                            ></el-autocomplete>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-tag style="margin-right: 5px">员工名称:</el-tag>
                            <el-input
                                    readonly="readonly"
                                    size="small"
                                    placeholder="输入工号可以自动填充"
                                    style="width: 180px"
                                    v-model="employeeec.employee.name">
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-tag style="margin-right: 5px">部门:</el-tag>
                            <el-input
                                    readonly="readonly"
                                    size="small"
                                    placeholder="输入工号可以自动填充"
                                    style="width: 180px"
                                    v-model="employeeec.employee.department.name">
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="8">
                        <div style="display: flex;justify-content: flex-start;align-items: center">
                            <el-tag style="margin-right: 5px">奖罚名称:</el-tag>
                                <el-select v-model="employeeec.rewardOrPenalty.id" placeholder="请选择" size="small" style="width: 190px" @change="autoFixRp">
                                    <el-option
                                            v-for="(r,index) in allrps"
                                            :key="index"
                                            :label="r.name"
                                            :value="r.id">
                                    </el-option>
                                </el-select>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-tag style="margin-right: 5px">奖罚说明:</el-tag>
                            <el-input
                                    readonly="readonly"
                                    size="small"
                                    placeholder="选择奖罚名称可以自动填充"
                                    style="width: 180px"
                                    v-model="employeeec.rewardOrPenalty.description">
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-tag style="margin-right: 5px">涉及金额:</el-tag>
                            <el-input
                                    readonly="readonly"
                                    size="small"
                                    placeholder="选择奖罚名称可以自动填充"
                                    style="width: 180px"
                                    v-model="employeeec.rewardOrPenalty.money">
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="16">
                        <div style="display: flex;justify-content: flex-start;">
                            <el-tag style="margin-right: 5px">备注:</el-tag>
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入备注"
                                    size="small"
                                    v-model="employeeec.remark">
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="addEmployeeec" size="small">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PerEc",
        data(){
            return{
                title:'新增员工奖罚信息',
                employeeecs:[],
                employeeec:{
                    id:null,
                    ecDate:null,
                    remark:"",
                    employee:{
                        id:null,
                        name:null,
                        departmentId: null,
                        jobNo:null,
                        department:{
                            name:""
                        }
                    },
                    rewardOrPenalty:{
                        id:null,
                        name:"",
                        description:"",
                        money:0
                    }
                },
                dialogVisible:false,
                total: 0,
                pageNo: 1,
                pageSize: 10,
                loading: false,
                name: "",
                showSearch:false,
                selectdDepName:'请选择部门',
                allDepartments:[],
                popVisible3:false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                searchParams:{
                    employee:{
                        name:null,
                        departmentId: null,
                        jobNo:null
                    }
                },
                empjobNos:[],
                allrps:[]
            }
        },
        mounted() {
          this.getEmployeeecs();
          this.getSelectData();
        },
        methods:{
            //自动填充奖罚信息
            autoFixRp(rpid){
              for(let index in this.allrps){
                  let rp = this.allrps[index];
                  if(rp.id === rpid){
                      this.employeeec.rewardOrPenalty.money = rp.money;
                      this.employeeec.rewardOrPenalty.description = rp.description;
                      this.employeeec.rewardOrPenalty.name = rp.name;
                  }
              }
            },
            //Input框输入时进行后端接口请求，把结果集放到搜索建议中
            querySearch(queryString, cb) {
                this.empjobNos = [];
                this.getRequest("/personnel/ec/"+queryString).then(resp=>{
                    for (let item of resp) {
                        this.empjobNos.push({"value": item.jobNo})
                    }
                    var empjobNos = this.empjobNos;
                    var results = queryString ? empjobNos.filter(this.createFilter(queryString)) : empjobNos;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                })
            },
            //搜索建议过滤方法
            createFilter(queryString) {
                return (empjobNos) => {
                    return (empjobNos.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
                };
            },
            //当选择某一项建议时，自动填充后面的Input框内容
            handleSelect(item) {
                this.getRequest("/personnel/ec/getEmpByJobNo/"+item.value).then(resp=>{
                    if(resp){
                        this.employeeec.employee.id = resp.id;
                        this.employeeec.employee.name = resp.name;
                        this.employeeec.employee.department.name = resp.department.name;
                    }
                })
            },
            //关闭对话框时，初始化数据源
            viewClose(){
                this.employeeec = {
                    id: null,
                    ecDate: null,
                    remark: "",
                    employee: {
                        id: null,
                        name: null,
                        departmentId: null,
                        jobNo: null,
                        department: {
                            name: ""
                        }
                    },
                    rewardOrPenalty: {
                        id: null,
                        name: "",
                        description: "",
                        money: 0
                    }
                };
            },
            //清空条件查询的内容
            emptySearchParams() {
                this.searchParams = {
                    employee:{
                        name:null,
                        departmentId: null,
                        jobNo:null
                    }
                };
                this.selectdDepName = '请选择部门';
                this.getEmployeeecs();
            },
            //发送数据请求
            getEmployeeecs(type){
                this.loading = true;
                if (type && type == 'advanced') {
                    this.postRequest("/personnel/ec/searchemployeeec?pageNo="+ this.pageNo + "&pageSize=" + this.pageSize,this.searchParams).then(resp=>{
                        this.loading = false;
                        if(resp){
                            this.employeeecs = resp.data;
                            this.total = resp.total;
                        }
                    })
                }else {
                    this.getRequest("/personnel/ec/?pageNo="+ this.pageNo + "&pageSize=" + this.pageSize+'&employee.name='+this.name).then(resp=>{
                        this.loading = false;
                        if(resp){
                            this.employeeecs = resp.data;
                            this.total = resp.total;
                        }
                    })
                }
            },
            //对象克隆，然后打开对话框
            showEdit(index,data){
                this.title='修改员工奖罚信息';
                this.employeeec = JSON.parse(JSON.stringify(data));
                this.dialogVisible = true;
            },
            //删除
            handleDelete(index,data){
                this.$confirm('此操作将永久删除【' + data.employee.name + '】的奖惩信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/personnel/ec/" + data.id).then(resp => {
                        if (resp) {
                            this.getEmployeeecs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showAddEmployeeec(){
                this.title='新增员工奖罚信息';
                this.dialogVisible = true;
            },
            addEmployeeec(){
                if(this.employeeec.id){
                    this.putRequest("/personnel/ec/",this.employeeec).then(resp=>{
                        if(resp){
                            this.getEmployeeecs();
                        }
                    })
                }else{
                    this.postRequest("/personnel/ec/",this.employeeec).then(resp=>{
                        if(resp){
                            this.getEmployeeecs();
                        }
                    })
                }
                this.dialogVisible = false;
            },
            //条件查询使用,打开树形选择界面
            showDepartmentViewToAdvanced(){
                this.popVisible3 = !this.popVisible3;
            },
            //条件查询树中点击节点发生时的事件,传入该节点的部门信息
            searchHandleNodeClick(data){
                if(data.parent){
                    return;
                }
                this.selectdDepName = data.name;//将部门名称显示出来
                this.searchParams.employee.departmentId = data.id;//将选中的部门id放入查询对象中
                this.popVisible3 = !this.popVisible3;//窗口关闭
            },
            //获取部门信息，并存储到浏览器缓存中
            getSelectData() {
                if (!window.sessionStorage.getItem("allDepartments")) {
                    this.getRequest("/employee/basic/getalldepartments").then(resp => {
                        if (resp) {
                            this.allDepartments = resp;
                            window.sessionStorage.setItem("allDepartments", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.allDepartments = JSON.parse(window.sessionStorage.getItem("allDepartments"));
                }
                if (!window.sessionStorage.getItem("allrps")) {
                    this.getRequest("/personnel/ec/getallrps").then(resp => {
                        if (resp) {
                            this.allrps = resp;
                            window.sessionStorage.setItem("allrps", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.allrps = JSON.parse(window.sessionStorage.getItem("allrps"));
                }
            },
            //点击下一页时的时候触发的函数，将页码改变，然后传参去后端获取数据
            nextClick(currentPage) {
                this.pageNo = currentPage;
                this.getEmployeeecs();
            },
            //点击上一页时的时候触发的函数，将页码改变，然后传参去后端获取数据
            prevClick(currentPage) {
                this.pageNo = currentPage;
                this.getEmployeeecs();
            },
            //点击页码的时候触发的函数，将页码改变，然后传参去后端获取数据
            currentChange(currentPage) {
                this.pageNo = currentPage;
                this.getEmployeeecs();
            },
            //点击页数的时候触发的函数，将页数改变，然后传参去后端获取数据
            sizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getEmployeeecs();
            }
        }
    }
</script>

<style>
    body .el-table th.gutter {
        display: table-cell !important
    }
    .depdiv {
        width: 150px;
        display: inline-flex;
        margin-top: 7px;
        font-size: inherit;
        border: 1px solid #dedede;
        height: 26px;
        border-radius: 5px;
        cursor: pointer;
        align-items: center;
        padding-left: 8px;
        box-sizing: border-box;
    }
</style>
